// 顶部导航

$bg:$primary;
$text-color: #fff;
$sub-bg: #fff;
$sub-color: #333;
body {
  padding-top: $topbar-height !important;
}

.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  background-color: $bg;
  z-index: 5 !important;
  width: 100% !important;
  border-radius: 0;

  &-left {
    .top-navbar-nav {
      > .nav-item {
        > .nav-link {
          font-size: .8rem;
          line-height: 1.5;
          padding-top: .5rem;

          .basic-icon {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-size: 2rem;
          }
        }
      }
    }
  }

  .nav-item {
    min-width: 5rem;

    &.active {
      > .nav-link {
        background-color: rgba(#fff, .2);
      }
    }

    > .nav-link {
      text-align: center;
      color: $text-color;
      height: $topbar-height;
      padding: {
        top: 0;
        bottom: 0;
      }
      line-height: $topbar-height;


      &:hover {
        background-color: rgba(#fff, .3);
      }
    }

    .dropdown-menu {
      border: 0;
      box-shadow: 0 0 5px rgba(#000, .3);

      .dropdown-item {
        padding-top: 5px;
        padding-bottom: 5px;
      }
    }
  }

  @keyframes bgFade {
    from {
      opacity: .5;
    }
    to {
      opacity: 1;
      box-shadow: 0 0 10px rgba($red, .3);
    }
  }

  .notice-badge {
    animation: {
      name: bgFade;
      timing-function: ease-in-out;
      direction: reverse;
      iteration-count: infinite;
      duration: .5s;
    }
  }

  .msg-dropdown {
    background-color: rgba(#000, .8);
    width: 300px;
    overflow-y: auto;

    .dropdown-item {


      &.msg-item {
        color: #ffffff;

        &:hover {
          background-color: rgba(#000, .5);
        }
      }
    }
  }
}
